import { Component, OnInit, Input, Output, EventEmitter, HostListener, ChangeDetectionStrategy } from '@angular/core';
import { itemAnim } from '../../animate/item.anim';

@Component({
  selector: 'task-task-item',
  templateUrl: './task-item.component.html',
  styleUrls: ['./task-item.component.scss'],
  animations: [
    itemAnim
  ],
  // 对于笨组件 所有的状态改变都是来自于输入属性 值边他才会变
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TaskItemComponent implements OnInit {
  @Input() item;
  @Input() avator;
  @Output() editTask = new EventEmitter<void>();
  itemState = 'in';
  constructor() { }
  ngOnInit() {
    this.avator = this.item.owner ? this.item.owner.avator : null;
  }
  onEditTask() {
    this.editTask.emit();
  }
  onCkeckBox(ev: Event) {
    ev.stopPropagation(); // 阻止事件冒泡
  }

  @HostListener('mouseenter')
  onmouseenter() {
    this.itemState = 'out';
  }
  @HostListener('mouseleave')
  onmouseleave() {
    this.itemState = 'in';
  }

}
